<template>
  <el-dialog :close-on-click-modal="modalClose?false:true" class="opc customer-big-img" modal-append-to-body lock-scroll :visible.sync="imgInfo.bigImageShow" :modal="callScreen?false:true" width="100%" :fullscreen="true" custom-class="bigimg">
    <div class="img_box" @click="changeShow">
      <img :src="imgInfo.url"/>
    </div>
  </el-dialog>
</template>
<script type="text/javascript">
  export default {
    name: 'bigImage',
    data () {
      return {
      }
    },
    props: {
      imgInfo: Object,
      callScreen: Boolean,
      modalClose: Boolean
    },
    methods: {
      changeShow (value) {
        this.$emit('closeImageDialog', value)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .el-dialog__header
    border 0
  .img_box
    width 100%
    height 100%
    overflow hidden
    position fixed
    top 0
    left 0
    display flex
    text-align center
    align-items center
    img
      max-width calc(100vw - 80px)
      max-height calc(100vh - 20px)
      margin 0 auto
</style>
